<template>
    <div>
        <div class="item" v-for="item in data" :key="item.id">
    <router-link :to="`/detail/${item.id}`">
        <div class="left">
            <img :src="item.img" alt @click.stop.prevent="ImagePreview(item.img)">
        </div>
        <div class="right">
            <div class="title">{{item.title}}</div>
            <div class="info">
                <span>{{ item.count }}人购买</span>
                <i class="cubeic-add" @click.stop.prevent="addCart($event,item)"></i>
            </div>
        </div>
    </router-link>
        </div>
    </div>
</template>
<script>
export default {
    name: 'goodsList',
    props: ['data'],
    methods: {
        addCart(e,item) {
            this.$store.commit('addCart', item)
            // 触发父组件的cartanim事件，并传入事件对象,通知播放小球动画
            this.$emit('cartanim', e.target)
        },
        ImagePreview(img) {
            this.$createImagePreview({
                imgs: [img]
            }).show()
        }
    }
}
</script>
<style lang="stylus" scoped>

.item {
    padding: 10px 15px
    position: relative
    background: #fff
    transition: all 0.3s ease
    
    + .item {
      border-top: 1px solid #f5f5f5
    }
  
    a {
      display: flex
      align-items: flex-start
      text-decoration: none
      color: inherit
    }
  
    .left {
      flex: 0 0 100px
      height: 100px
      margin-right: 15px
      border-radius: 4px
      overflow: hidden
      background: #f8f8f8
  
      img {
        width: 100%
        height: 100%
        object-fit: cover
        transition: transform 0.3s ease
      }
  
      &:hover img {
        transform: scale(1.05)
      }
    }
  
    .right {
      flex: 1
      min-width: 0  // 防止内容溢出
  
      .title {
        font-size: 16px
        font-weight: 600
        line-height: 1.4
        margin-bottom: 8px
        word-break: break-word
        display: -webkit-box
        -webkit-line-clamp: 2
        -webkit-box-orient: vertical
        overflow: hidden
      }
  
      .info {
        display: flex
        align-items: center
        justify-content: space-between
        margin-top: 12px
        font-size: 13px
        color: #666
  
        .cubeic-add {
          font-size: 20px
          color: $theme-color  // 使用主题色变量
          padding: 5px
          margin-right: -5px  // 抵消图标点击区域
          cursor: pointer
          transition: opacity 0.3s
  
          &:active {
            opacity: 0.7
          }
        }
      }
    }
  
    @media (max-width: 375px) {
      padding: 8px 12px
      
      .left {
        flex-basis: 80px
        height: 80px
        margin-right: 12px
      }
      
      .right .title {
        font-size: 15px
      }
    }
  }
</style>